<template>
    <div class="preview">
        <div class="preview-mask"></div>
        <div class="preview-container">
            <div id="img_container">
                <div class="preview-wrap" :style="imgContainer">
                    <img :class="`rotate${rotate}`" :src="images.length > 0 ? images[index].url : ''" id="img_preview">
                    <a class="preview-close" @click="close" target="_"><icon class="close-icon" type="close" color="#fff" :size="30"></icon></a>
                </div>
            </div>
            <div class="preview-toolbar">
                <ul class="tool-list">
                    <li class="tool-item" @click="prev">
                        <a><icon class="tool-icon" type="arrow-left" :color="index == 0 ? '#666' : '#fff'" :size="30"></icon></a>
                    </li>
                    <li class="tool-item">
                        <a download="下载" :href="downloadUrl" target="_blank"><icon class="tool-icon" type="download" color="#fff" :size="30"></icon></a>
                    </li>
                    <li class="tool-item" @click="handleRotate">
                        <a><icon class="tool-icon" type="rotate" color="#fff" :size="30"></icon></a>
                    </li>
                    <li class="tool-item" @click="next">
                        <a><icon class="tool-icon" type="arrow-right" :color="index == images.length - 1 ? '#666' : '#fff'" :size="30"></icon></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import icon from '@/components/icon/index'
export default {
    data() {
        return {
            index: this.currentIndex,
            rotate: 0,
            imgContainer: {
                width: 'auto',
                height: 'auto',
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)'
            }
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        images: {
            type: Array,
            default: function() {
                return []
            }
        },
        currentIndex: {
            type: Number,
            default: 0
        }
    },
    computed: {
        downloadUrl() {
            return this.images.length > 0 ? this.images[this.index].url : ''
        }
    },
    components: {
        icon
    },
    methods: {
        init() {
            let _this = this
            let screenW = document.documentElement.offsetWidth || document.body.offsetWidth
            let screenH = document.documentElement.scrollHeight || document.body.scrollHeight
            let image = new Image()
            image.src = this.images[this.index].url
            image.onload = function() {
                const ratio = [0.1, 0.2, 0.3, 0.4, 0.5, 0.7, 0.8, 0.9]
                for (let item of ratio) {
                    if (image.width * item < screenW && image.height * item < screenH - 220) {
                        _this.imgContainer.width = image.width * item + 'px'
                        _this.imgContainer.height = image.height * item + 'px'
                    }
                }
            }
        },
        prev() {
            let _this = this
            if (this.index > 0) {
                this.index = this.index - 1
                this.rotate = 0
                _this.init()
            }
        },
        handleRotate() {
            if (this.rotate != 270) {
                this.rotate += 90
            } else {
                this.rotate = 0
            }
        },
        next() {
            let _this = this
            if (this.index < this.images.length - 1) {
                this.index = this.index + 1
                this.rotate = 0
                _this.init()
            }
        },
        close() {
            this.$emit('close')
        }
    },
    mounted() {
        this.init()
    }
}
</script>
<style lang="less">
.preview {
    .preview-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .92;
        background-color: #000;
        z-index: 9998;
    }
    .preview-container {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        text-align: center;
        z-index: 10000;
        overflow: hidden;
        .preview-wrap {
            position: absolute;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            img {
                width: 100%;
                height: 100%;
                min-width: 50px;
                min-height: 50px;
                &.rotate90 {
                    transform: rotate(-90deg);
                }
                &.rotate180 {
                    transform: rotate(-180deg);
                }
                &.rotate270 {
                    transform: rotate(-270deg);
                }
            }
            .preview-close {
                position: absolute;
                right: -28px;
                top: -28px;
                .close-icon {
                    display: inline-block;
                    vertical-align: middle;
                    width: 55px;
                    height: 55px;
                    line-height: 55px;
                    border-radius: 50%;
                    background-color: rgba(0, 0, 0, .6)
                }
            }
        }
        .preview-toolbar {
            position: fixed;
            left: 50%;
            bottom: 100px;
            margin-left: -325px;
            width: 650px;
            text-align: center;
            .tool-list {
                display: inline-block;
                border-radius: 45px;
                -moz-border-radius: 45px;
                -webkit-border-radius: 45px;
                padding: 0 4px;
                line-height: 32px;
                background: hsla(0,0%,100%,.1);
                .tool-item {
                    float: left;
                    a {
                        display: block;
                        padding: 0 32px;
                        color: #fff;
                        text-decoration: none;
                        .tool-icon {
                            padding: 15px;
                        }
                    }
                    &:first-child {
                        border-left-width: 0;
                    }
                }
            }
        }
    }
}
</style>
